<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    #inputBox {
      width: 300px;
      padding: 10px;
      font-size: 16px;
    }

    #searchButton {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    #container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #results {
      margin-top: 20px;
    }

    .result-item {
      border: 1px solid #ddd;
      padding: 10px;
      margin-bottom: 10px;
    }

    .result-item h3 {
      margin: 0;
    }

    .result-item p {
      margin: 5px 0;
    }
  </style>
</head>

<body>
  <input type="text" id="inputBox" />
  <button id="searchButton">搜索</button>
  <div id="results"></div>

  <script>
    // 发送请求的函数
    function sendRequest(type, data) {
      fetch('/api', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ type, data })
      })
        .then(response => response.json())
        .then(result => {
          const resultsDiv = document.getElementById('results');
          resultsDiv.innerHTML = '';

          if (type === 0) { // 关键词推荐
            result.result.forEach(keyword => {
              const p = document.createElement('p');
              p.style.cursor = 'pointer';
              p.style.padding = '5px';
              p.style.margin = '0';
              p.style.color = '#333';
              p.addEventListener('mouseover', () => {
                p.style.backgroundColor = '#f0f0f0';
              });
              p.addEventListener('mouseout', () => {
                p.style.backgroundColor = '';
              });
              p.addEventListener('click', () => {
                document.getElementById('inputBox').value = keyword;
              });
              p.textContent = keyword;
              resultsDiv.appendChild(p);
            });
          } else if (type === 1) { // 网页搜索
            if (result.size === 0) {
              const p = document.createElement('p');
              p.textContent = '搜索结果为空';
              resultsDiv.appendChild(p);
            }
            result.result.forEach(item => {
              const div = document.createElement('div');
              div.classList.add('result-item');

              const h3 = document.createElement('h3');
              h3.textContent = item.title;
              div.appendChild(h3);

              const p = document.createElement('p');
              p.textContent = item.content.slice(0, 100) + '...';
              div.appendChild(p);

              const a = document.createElement('a');
              a.href = item.link;
              a.textContent = '查看详情';
              div.appendChild(a);

              resultsDiv.appendChild(div);
            });
          }
        })
        .catch(error => console.error('Error:', error));
    }

    // 输入框的事件处理
    document.getElementById('inputBox').addEventListener('input', event => {
      sendRequest(0, event.target.value);
    });
    document.getElementById('inputBox').addEventListener('keyup', event => {
      if (event.key === 'Enter') {
        sendRequest(1, event.target.value);
      }
    });

    // 搜索按钮的事件处理
    document.getElementById('searchButton').addEventListener('click', () => {
      const inputValue = document.getElementById('inputBox').value;
      sendRequest(1, inputValue);
    });
  </script>
</body>

</html>